Project health chart on LayerChart

Project page gets a Sante chart: daily mean of per-routine health
via computeProjectHealthSeries, ending at the current health score.
Both charts share a HealthChart component built on LayerChart's
AreaChart (time x-axis, fixed 0-100 y-axis, completion dots).

1 files changed, 28 insertions, 0 deletions

diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte
index b67ff45..a58aeba 100644
--- a/src/routes/projects/[id]/+page.svelte
+++ b/src/routes/projects/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import { matchItems } from '$lib/components/fuzzy-search';
+	import HealthChart from '$lib/components/HealthChart.svelte';
 	import ScoreBadge from '$lib/components/ScoreBadge.svelte';
 	import StatusBadge from '$lib/components/StatusBadge.svelte';
 	import {
@@ -53,6 +54,18 @@
 		<ScoreBadge score={data.healthScore} />
 	</header>
 
+	{#if data.healthSeries.length > 0}
+		<section>
+			<h2 class="section-title">Santé</h2>
+			<div class="form-card chart-card">
+				<HealthChart
+					series={data.healthSeries}
+					ariaLabel="Évolution de la santé du projet dans le temps"
+				/>
+			</div>
+		</section>
+	{/if}
+
 	<form
 		class="add-bar"
 		method="POST"
@@ -251,6 +264,21 @@
 </main>
 
 <style>
+	.section-title {
+		font-size: 0.75rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: var(--accent);
+		margin: 1.5rem 0 0.5rem;
+		padding-left: 0.5rem;
+		border-left: 3px solid var(--accent);
+	}
+
+	.chart-card {
+		align-items: stretch;
+	}
+
 	.routine-row {
 		flex-wrap: wrap;
 		padding: 0.75rem 1rem;